global-reset()

*
    box-sizing: border-box

html,body
    width:  100%

body
    font-family: "Raleway"
    font-weight: 100
    background-color: #f1f1f1
   
a
    text-decoration: none
     
.nav-bar
    height:60px
    .author
        line-height: 60px
        display: inline-block
        margin-right: 20px
        float: right
        color: #ffffff
        font-size: 20px
        letter-spacing: 1px

.top
    position: relative
    height: 900px
    background: linear-gradient(#019AD3, #9FE0F8)
    :after
        background: #f1f1f1
        content: ""
        height: 200px
        position: absolute
        bottom: -50px
        left: 0
        transform: skewY(-2deg)
        width: 100%
        z-index: 3
    .title
        display: block
        font-size: 75px
        margin: 60px auto 60px auto
        text-align: center
        color: white
        font-weight: 300
    .desc
        line-height: 20px
        width: 620px
        margin: 20px auto 0px auto
        letter-spacing: 1px
        display: block
        font-size: 20px
        color: white
        text-align: center
        font-weight:100


.container
    z-index: 10
    margin-top: -500px
    .screenshot
        z-index: 10
        position: relative
        width: 1165px
        height: 667px
        margin: 60px auto 0px auto
        img.app-screenshot
            z-index: 20
            float: left
            display: block
            margin-right: 20px
            width: 375px
            &:last-child
                margin-right: 0px
    .mobile-screenshot
        width: 90%
        margin: 90px auto 0px auto
        z-index: 10
        position: relative
        
    .download-button
        display: block
        margin: 70px 0px 100px 0px
        img
            display: block
            width: 250px
            margin: 10px auto
            
    .heap
        margin: 0px auto 50px 0px
        text-align: center
        .title
            margin-bottom: 5px
        

@media(min-width: 300px)
    .top
        .title
            width: 90%
        .desc
            width: 90%
    .container
        .screenshot
            display: none
        .mobile-screenshot
            display: block
            

@media(min-width: 1165px)
    .container
        .screenshot
            display: block
        .mobile-screenshot
            display: none
    

            
